<template>
  <div class="w-100 h-100">
    <containTemplete
      :title="''"
      :secondTitles="['水资源', '', '饮用水安全']"
      :slotWidth="[33, 33, 33]"
    >
      <template #left>
        <div class="w-100 h-100">
          <szy1 />
        </div>
      </template>
      <template #middle>
        <szy2 />
      </template>

      <template #right>
        <saq :selectValue="right_value" @itemChange="itemChange"/>
      </template>

      <template #right_control v-if="controlVisible">
            <proSelect
            :optionsData="useOptions().year()"
            :defaultSelectValue="2024"
             v-model:select-value="right_value"
            :width="150"
            > </proSelect>
        </template>


    </containTemplete>
  </div>
</template>

<script setup lang="ts">
import szy1 from "./szy1.vue";
import szy2 from "./szy2.vue";
import saq from './saq.vue'
import { useOptions } from "@/hook/useOptions";

const right_value = ref(2024)

let controlVisible = ref(false)

const itemChange = (val) => {
  controlVisible.value = !!val
}
onMounted(() => {});
</script>

<style scoped lang="less"></style>
